<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>webdoc</title>
    <link rel="stylesheet" type="text/css" href="../static/css/main.css">
</head>
<body>
<div class="nav">
    <div class="logo">
        
            webdoc
        
    </div>
<ul><li><a href="../index.html">0.Async</a></li><li><a href="../html/0.editor.html">0.editor</a></li><li><a href="../html/0.module.html">0.module</a></li><li><a href="../html/1.ES2015.html">1.ES2015</a></li><li><a href="../html/2.Promise.html">2.Promise</a></li><li><a href="../html/3.Node.html">3.Node</a></li><li><a href="../html/4.NodeInstall.html">4.NodeInstall</a></li><li><a href="../html/5.REPL.html">5.REPL</a></li><li><a href="../html/6.NodeCore.html">6.NodeCore</a></li><li><a href="../html/7.module&NPM.html">7.module&NPM</a></li><li><a href="../html/8.Encoding.html">8.Encoding</a></li><li><a href="../html/9.Buffer.html">9.Buffer</a></li><li><a href="../html/10.fs.html">10.fs</a></li><li><a href="../html/11.Stream-1.html">11.Stream-1</a></li><li><a href="../html/11.Stream-2.html">11.Stream-2</a></li><li><a href="../html/11.Stream-3.html">11.Stream-3</a></li><li><a href="../html/11.Stream-4.html">11.Stream-4</a></li><li><a href="../html/12-Network-2.html">12-Network-2</a></li><li><a href="../html/12.NetWork-3.html">12.NetWork-3</a></li><li><a href="../html/12.Network-1.html">12.Network-1</a></li><li><a href="../html/13.tcp.html">13.tcp</a></li><li><a href="../html/14.http-1.html">14.http-1</a></li><li><a href="../html/14.http-2.html">14.http-2</a></li><li><a href="../html/15.compress.html">15.compress</a></li><li><a href="../html/16.crypto.html">16.crypto</a></li><li><a href="../html/17.process.html">17.process</a></li><li><a href="../html/18.yargs.html">18.yargs</a></li><li><a href="../html/19.cache.html">19.cache</a></li><li><a href="../html/20.action.html">20.action</a></li><li><a href="../html/21.https.html">21.https</a></li><li><a href="../html/22.cookie.html">22.cookie</a></li><li><a href="../html/23.session.html">23.session</a></li><li><a href="../html/24.express-1.html">24.express-1</a></li><li><a href="../html/24.express-2.html">24.express-2</a></li><li><a href="../html/24.express-3.html">24.express-3</a></li><li><a href="../html/24.express-4.html">24.express-4</a></li><li><a href="../html/25.koa-1.html">25.koa-1</a></li><li><a href="../html/26.webpack-1-basic.html">26.webpack-1-basic</a></li><li><a href="../html/26.webpack-2-optimize.html">26.webpack-2-optimize</a></li><li><a href="../html/26.webpack-3.tapable.html">26.webpack-3.tapable</a></li><li><a href="../html/26.webpack-4-AST.html">26.webpack-4-AST</a></li><li><a href="../html/26.webpack-5-source.html">26.webpack-5-source</a></li><li><a href="../html/26.webpack-6-loader.html">26.webpack-6-loader</a></li><li><a href="../html/26.webpack-7-plugin.html">26.webpack-7-plugin</a></li><li><a href="../html/26.webpack-8-hand.html">26.webpack-8-hand</a></li><li><a href="../html/27.react-1.html">27.react-1</a></li><li><a href="../html/27.react-2.html">27.react-2</a></li><li><a href="../html/27.react-3.html">27.react-3</a></li><li><a href="../html/27.react-4-immutable.html">27.react-4-immutable</a></li><li><a href="../html/27.react-5-react-dom-diff.html">27.react-5-react-dom-diff</a></li><li><a href="../html/27.react-6.html">27.react-6</a></li><li><a href="../html/28.react-mobx.html">28.react-mobx</a></li><li><a href="../html/28.redux-0.html">28.redux-0</a></li><li><a href="../html/28.redux-1.html">28.redux-1</a></li><li><a href="../html/28.redux-2-中间件.html">28.redux-2-中间件</a></li><li><a href="../html/28.redux-3-saga.html">28.redux-3-saga</a></li><li><a href="../html/28.redux-jwt-back.html">28.redux-jwt-back</a></li><li><a href="../html/28.redux-jwt-front.html">28.redux-jwt-front</a></li><li><a href="../html/29.mongodb-1.html">29.mongodb-1</a></li><li><a href="../html/29.mongodb-2.html">29.mongodb-2</a></li><li><a href="../html/29.mongodb-3.html">29.mongodb-3</a></li><li><a href="../html/29.mongodb-4.html">29.mongodb-4</a></li><li><a href="../html/29.mongodb-5.html">29.mongodb-5</a></li><li><a href="../html/29.mongodb-6.html">29.mongodb-6</a></li><li><a href="../html/30.cms-1-mysql.html">30.cms-1-mysql</a></li><li><a href="../html/30.cms-2-mysql.html">30.cms-2-mysql</a></li><li><a href="../html/30.cms-3-mysql.html">30.cms-3-mysql</a></li><li><a href="../html/30.cms-4-egg.html">30.cms-4-egg</a></li><li><a href="../html/30.cms-5-api.html">30.cms-5-api</a></li><li><a href="../html/30.cms-6-roadhog.html">30.cms-6-roadhog</a></li><li><a href="../html/30.cms-7-umi.html">30.cms-7-umi</a></li><li><a href="../html/30.cms-8-dva.html">30.cms-8-dva</a></li><li><a href="../html/30.cms-9-dva.html">30.cms-9-dva</a></li><li><a href="../html/30.cms-10-dva.html">30.cms-10-dva</a></li><li><a href="../html/30.cms-11-front.html">30.cms-11-front</a></li><li><a href="../html/31.cms-12-api.html">31.cms-12-api</a></li><li class="active"><a href="../html/31.cms-13-front.html">31.cms-13-front</a></li><li><a href="../html/31.cms-14-deploy.html">31.cms-14-deploy</a></li><li><a href="../html/32.ant.html">32.ant</a></li><li><a href="../html/33.redis.html">33.redis</a></li><li><a href="../html/34.unittest.html">34.unittest</a></li><li><a href="../html/35.jwt.html">35.jwt</a></li><li><a href="../html/36.websocket-1.html">36.websocket-1</a></li><li><a href="../html/36.websocket-2.html">36.websocket-2</a></li><li><a href="../html/38.chat-api-1.html">38.chat-api-1</a></li><li><a href="../html/38.chat-api-2.html">38.chat-api-2</a></li><li><a href="../html/38.chat-3.html">38.chat-3</a></li><li><a href="../html/38.chat-api-3.html">38.chat-api-3</a></li><li><a href="../html/38.chat.html">38.chat</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/38.chat2.html">38.chat2</a></li><li><a href="../html/39.crawl-0.html">39.crawl-0</a></li><li><a href="../html/39.crawl-1.html">39.crawl-1</a></li><li><a href="../html/39.crawl-2.html">39.crawl-2</a></li><li><a href="../html/40.deploy.html">40.deploy</a></li><li><a href="../html/41.safe.html">41.safe</a></li><li><a href="../html/42.test.html">42.test</a></li><li><a href="../html/43.nginx.html">43.nginx</a></li><li><a href="../html/44.enzyme.html">44.enzyme</a></li><li><a href="../html/45.docker.html">45.docker</a></li><li><a href="../html/46.elastic.html">46.elastic</a></li><li><a href="../html/47.oauth.html">47.oauth</a></li><li><a href="../html/48.wxpay.html">48.wxpay</a></li><li><a href="../html/49.nunjucks.html">49.nunjucks</a></li><li><a href="../html/50.ketang.html">50.ketang</a></li><li><a href="../html/index.html">index</a></li><li><a href="../html/51.typescript.html">51.typescript</a></li><li><a href="../html/52.UML.html">52.UML</a></li><li><a href="../html/53.design.html">53.design</a></li><li><a href="../html/index.html">index</a></li></ul></div>


<div class="warpper">

    <div class="page-toc">
        <ul><li><a href="#t01. 生成项目">1. 生成项目</a></li><li><a href="#t12.配置代理">2.配置代理</a></li><li><a href="#t23. 后台首页布局模版">3. 后台首页布局模版</a></li><li><a href="#t34. 顶部导航条">4. 顶部导航条</a><ul><li><a href="#t44.1 AdminHeader/index.js">4.1 AdminHeader/index.js</a></li><li><a href="#t54.2 AdminHeader/index.css">4.2 AdminHeader/index.css</a></li><li><a href="#t64.3 admin/_layout.js">4.3 admin/_layout.js</a></li></ul></li><li><a href="#t75. 左侧导航">5. 左侧导航</a><ul><li><a href="#t85.1 NavLeft/index.js">5.1 NavLeft/index.js</a></li><li><a href="#t95.2 NavLeft/index.css">5.2 NavLeft/index.css</a></li><li><a href="#t105.3 admin/_layout.js">5.3 admin/_layout.js</a></li></ul></li><li><a href="#t116. 用户管理">6. 用户管理</a><ul><li><a href="#t126.1 admin/_layout.js">6.1 admin/_layout.js</a></li><li><a href="#t136.2 user/constants.js">6.2 user/constants.js</a></li><li><a href="#t146.3 user/index.js">6.3 user/index.js</a></li><li><a href="#t156.4 models/user.js">6.4 models/user.js</a></li><li><a href="#t166.5 services/user.js">6.5 services/user.js</a></li><li><a href="#t176.6 utils/request.js">6.6 utils/request.js</a></li></ul></li><li><a href="#t187.全部删除">7.全部删除</a><ul><li><a href="#t197.1 user/index.js">7.1 user/index.js</a></li><li><a href="#t207.2 models/user.js">7.2 models/user.js</a></li><li><a href="#t217.3 services/user.js">7.3 services/user.js</a></li></ul></li><li><a href="#t228. 搜索">8. 搜索</a><ul><li><a href="#t238.1 user/index.js">8.1 user/index.js</a></li><li><a href="#t248.2 models/user.js">8.2 models/user.js</a></li></ul></li><li><a href="#t259. 点击选择行">9. 点击选择行</a><ul><li><a href="#t269.1 user/index.js">9.1 user/index.js</a></li></ul></li><li><a href="#t2710. 角色管理">10. 角色管理</a><ul><li><a href="#t2810.1 role/index.js">10.1 role/index.js</a></li><li><a href="#t2910.2 models/role.js">10.2 models/role.js</a></li><li><a href="#t3010.3 services/role.js">10.3 services/role.js</a></li></ul></li><li><a href="#t3111. 设置权限">11. 设置权限</a><ul><li><a href="#t3211.1 role/index.js">11.1 role/index.js</a></li><li><a href="#t3311.2 models/role.js">11.2 models/role.js</a></li><li><a href="#t3411.3 services/role.js">11.3 services/role.js</a></li></ul></li><li><a href="#t35参考">参考</a></li></ul>
    </div>
    
    <div class="content markdown-body">
        <h2 id="t01. &#x751F;&#x6210;&#x9879;&#x76EE;">1. &#x751F;&#x6210;&#x9879;&#x76EE; <a href="#t01. &#x751F;&#x6210;&#x9879;&#x76EE;"> # </a></h2>
<pre><code class="lang-js">npm i dva-cli@next -g
dva <span class="hljs-keyword">new</span> zhufeng-cms2-api
cd zhufeng-cms2-api
npm start
</code></pre>
<h2 id="t12.&#x914D;&#x7F6E;&#x4EE3;&#x7406;">2.&#x914D;&#x7F6E;&#x4EE3;&#x7406; <a href="#t12.&#x914D;&#x7F6E;&#x4EE3;&#x7406;"> # </a></h2>
<p>&#x6839;&#x76EE;&#x5F55;&#x4E0B;&#x65B0;&#x5EFA;&#x6587;&#x4EF6; <code>.webpackrc.js</code></p>
<pre><code class="lang-js"><span class="hljs-keyword">const</span> {resolve}=<span class="hljs-built_in">require</span>(<span class="hljs-string">&apos;path&apos;</span>);
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-string">&quot;proxy&quot;</span>:{
        <span class="hljs-string">&quot;/api&quot;</span>:{
            <span class="hljs-string">&quot;target&quot;</span>:<span class="hljs-string">&quot;http://localhost:7001&quot;</span>,
            <span class="hljs-string">&quot;changeOrigin&quot;</span>:<span class="hljs-literal">true</span>,
            <span class="hljs-string">&quot;pathRewrite&quot;</span>:{
                <span class="hljs-string">&quot;^/api&quot;</span>:<span class="hljs-string">&quot;&quot;</span>
            }
        }
    },
    <span class="hljs-string">&quot;alias&quot;</span>:{
        <span class="hljs-string">&quot;@&quot;</span>:resolve(<span class="hljs-string">&quot;src&quot;</span>)
    }
}
</code></pre>
<h2 id="t23. &#x540E;&#x53F0;&#x9996;&#x9875;&#x5E03;&#x5C40;&#x6A21;&#x7248;">3. &#x540E;&#x53F0;&#x9996;&#x9875;&#x5E03;&#x5C40;&#x6A21;&#x7248; <a href="#t23. &#x540E;&#x53F0;&#x9996;&#x9875;&#x5E03;&#x5C40;&#x6A21;&#x7248;"> # </a></h2>
<p>pages/admin/_layout.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component,Fragment} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {Layout} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">const</span> {Header,Content,Sider,Footer}=Layout;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Admin</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Layout</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">Header</span>&gt;</span>Header<span class="hljs-tag">&lt;/<span class="hljs-name">Header</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">Layout</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">Sider</span>&gt;</span>
                        Sider
                    <span class="hljs-tag">&lt;/<span class="hljs-name">Sider</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">Content</span>&gt;</span>
                        Content
                    <span class="hljs-tag">&lt;/<span class="hljs-name">Content</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">Layout</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">Footer</span>&gt;</span>
                    &#x73E0;&#x5CF0;&#x57F9;&#x8BAD; @2018
                <span class="hljs-tag">&lt;/<span class="hljs-name">Footer</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">Layout</span>&gt;</span></span>
        )
    }
}
</code></pre>
<h2 id="t34. &#x9876;&#x90E8;&#x5BFC;&#x822A;&#x6761;">4. &#x9876;&#x90E8;&#x5BFC;&#x822A;&#x6761; <a href="#t34. &#x9876;&#x90E8;&#x5BFC;&#x822A;&#x6761;"> # </a></h2>
<h3 id="t44.1 AdminHeader/index.js">4.1 AdminHeader/index.js <a href="#t44.1 AdminHeader/index.js"> # </a></h3>
<p>components/AdminHeader/index.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component,Fragment} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {Layout} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> logo <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;@/assets/logo.png&apos;</span>;
<span class="hljs-keyword">import</span> styles <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./index.less&apos;</span>;
<span class="hljs-keyword">const</span> {Header,Content,Sider,Footer}=Layout;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AdminHeader</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    render() {
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Header</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{styles.header_logo}</span> <span class="hljs-attr">src</span>=<span class="hljs-string">{logo}</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&#x56FE;&#x6807;&quot;</span> /&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">className</span>=<span class="hljs-string">{styles.header_welcome}</span>&gt;</span>&#x6B22;&#x8FCE;&#x767B;&#x5F55; &#x5F20;&#x4E09;<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">Header</span>&gt;</span>
        )
    }
}
</span></code></pre>
<h3 id="t54.2 AdminHeader/index.css">4.2 AdminHeader/index.css <a href="#t54.2 AdminHeader/index.css"> # </a></h3>
<p>components/AdminHeader/index.css</p>
<pre><code class="lang-css"><span class="hljs-selector-class">.header_logo</span>{
    <span class="hljs-attribute">width</span>:<span class="hljs-number">120px</span>;
    <span class="hljs-attribute">height</span>:<span class="hljs-number">32px</span>;
    <span class="hljs-attribute">margin</span>:<span class="hljs-number">16px</span>;
    <span class="hljs-attribute">float</span>:left;
}
<span class="hljs-selector-class">.header_welcome</span>{
    <span class="hljs-attribute">float</span>:right;
        <span class="hljs-attribute">color</span>:<span class="hljs-number">#FFF</span>;
}
`
</code></pre>
<h3 id="t64.3 admin/_layout.js">4.3 admin/_layout.js <a href="#t64.3 admin/_layout.js"> # </a></h3>
<p>pages/admin/_layout.js</p>
<pre><code class="lang-diff"> import React,{Component,Fragment} from &apos;react&apos;;
 import {Layout} from &apos;antd&apos;;
<span class="hljs-addition">+import AdminHeader from &apos;@/components/AdminHeader&apos;;</span>
 const {Header,Content,Sider,Footer}=Layout;
 export default class Admin extends Component{
     render() {
         return (
             &lt;Layout&gt;
<span class="hljs-deletion">-                &lt;Header&gt;Header&lt;/Header&gt;</span>
<span class="hljs-addition">+                &lt;AdminHeader/&gt;</span>
                 &lt;Layout&gt;
                     &lt;Sider&gt;
                         Sider
</code></pre>
<h2 id="t75. &#x5DE6;&#x4FA7;&#x5BFC;&#x822A;">5. &#x5DE6;&#x4FA7;&#x5BFC;&#x822A; <a href="#t75. &#x5DE6;&#x4FA7;&#x5BFC;&#x822A;"> # </a></h2>
<h3 id="t85.1 NavLeft/index.js">5.1 NavLeft/index.js <a href="#t85.1 NavLeft/index.js"> # </a></h3>
<p>src/components/NavLeft/index.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component,Fragment} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {Menu,Icon} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> Link <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;umi/link&apos;</span>;
<span class="hljs-keyword">import</span> styles <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./index.css&apos;</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">AdminHeader</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    render() {
        <span class="hljs-keyword">return</span> (
            &lt;Menu
                className={styles.navleft}
                theme=&quot;dark&quot;
                defaultSelectedKeys={[&quot;/admin/user&quot;]}
                defaultOpenKeys={[&quot;/admin/permission&quot;]}
                mode=&quot;inline&quot;
            &gt;
                &lt;Menu.SubMenu key=&quot;/admin/permission&quot; title={&lt;span&gt;&lt;Icon type=&quot;bars&quot;/&gt;&#x6743;&#x9650;&#x7BA1;&#x7406;&lt;/span&gt;}&gt;
                    &lt;Menu.Item key=&quot;/admin/user&quot;&gt;&lt;Link to=&quot;/admin/user&quot;&gt;&lt;Icon type=&quot;user&quot; /&gt;&#x7528;&#x6237;&#x7BA1;&#x7406;&lt;/Link&gt;&lt;/Menu.Item&gt;
                    &lt;Menu.Item key=&quot;/admin/resource&quot;&gt;&lt;Link to=&quot;/admin/resource&quot;&gt;&lt;Icon type=&quot;wallet&quot; /&gt;&#x8D44;&#x6E90;&#x7BA1;&#x7406;&lt;/Link&gt;&lt;/Menu.Item&gt;
                    &lt;Menu.Item key=&quot;/admin/role&quot;&gt;&lt;Link to=&quot;/admin/role&quot;&gt;&lt;Icon type=&quot;idcard&quot;/&gt;&#x89D2;&#x8272;&#x7BA1;&#x7406;&lt;/Link&gt;&lt;/Menu.Item&gt;
                &lt;/Menu.SubMenu&gt;
            &lt;/Menu&gt;
        )
    }
}
</code></pre>
<h3 id="t95.2 NavLeft/index.css">5.2 NavLeft/index.css <a href="#t95.2 NavLeft/index.css"> # </a></h3>
<p>components/NavLeft/index.css</p>
<pre><code class="lang-css"><span class="hljs-selector-class">.navleft</span>{
    <span class="hljs-attribute">height</span>: <span class="hljs-built_in">calc</span>(100vh - 133px);
}
</code></pre>
<h3 id="t105.3 admin/_layout.js">5.3 admin/_layout.js <a href="#t105.3 admin/_layout.js"> # </a></h3>
<p>src/pages/admin/_layout.js</p>
<pre><code class="lang-diff"><span class="hljs-addition">+ import NavLeft from &apos;@/components/NavLeft&apos;;</span>

<span class="hljs-deletion">-                        Sider</span>
<span class="hljs-addition">+                        &lt;NavLeft/&gt;</span>
</code></pre>
<h2 id="t116. &#x7528;&#x6237;&#x7BA1;&#x7406;">6. &#x7528;&#x6237;&#x7BA1;&#x7406; <a href="#t116. &#x7528;&#x6237;&#x7BA1;&#x7406;"> # </a></h2>
<h3 id="t126.1 admin/_layout.js">6.1 admin/_layout.js <a href="#t126.1 admin/_layout.js"> # </a></h3>
<p>src/pages/admin/_layout.js</p>
<pre><code class="lang-diff"><span class="hljs-deletion">-                        Content</span>
<span class="hljs-addition">+                        {this.props.children}</span>
</code></pre>
<h3 id="t136.2 user/constants.js">6.2 user/constants.js <a href="#t136.2 user/constants.js"> # </a></h3>
<p>src/pages/admin/user/constants.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">export</span>  <span class="hljs-keyword">const</span> PAGE_SIZE = <span class="hljs-number">3</span>;
</code></pre>
<h3 id="t146.3 user/index.js">6.3 user/index.js <a href="#t146.3 user/index.js"> # </a></h3>
<p>src/pages/admin/user/index.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component,Fragment} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {connect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">import</span> {Card,Table,Button,Modal,Form,Input,message,Popconfirm} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> {PAGE_SIZE} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./constants&apos;</span>;
<span class="hljs-keyword">import</span> { routerRedux } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva/router&apos;</span>;
<span class="hljs-keyword">const</span> FormItem=Form.Item;
@connect(
    <span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> ({...state.users,<span class="hljs-attr">loading</span>:state.loading.models.users})
)
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Users</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    save = <span class="hljs-function">(<span class="hljs-params">payload</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;users/save&apos;</span>,
            payload
        });
    }
    onAdd=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,<span class="hljs-attr">record</span>: {} });
    }
    onEdit=<span class="hljs-function">(<span class="hljs-params">record</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">false</span>,record});
    }
    onEditCancel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({ <span class="hljs-attr">editVisible</span> : <span class="hljs-literal">false</span> });
    }
    onEditOk=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.editForm.props.form.validateFields(<span class="hljs-function">(<span class="hljs-params">err,values</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (err) {
                <span class="hljs-keyword">return</span> message.error(<span class="hljs-string">&apos;&#x8868;&#x5355;&#x6821;&#x9A8C;&#x5931;&#x8D25;!&apos;</span>);
            } <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">this</span>.props.dispatch({
                    <span class="hljs-attr">type</span>: <span class="hljs-keyword">this</span>.props.isCreate?<span class="hljs-string">&apos;users/create&apos;</span>:<span class="hljs-string">&apos;users/update&apos;</span>,
                    <span class="hljs-attr">payload</span>:values
                });
            }
        });
    }
    onDel=<span class="hljs-function">(<span class="hljs-params">id</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;users/del&apos;</span>,
            <span class="hljs-attr">payload</span>:id
        });
    }
    render() {
        <span class="hljs-keyword">const</span> columns=[
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x7528;&#x6237;&#x540D;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;name&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;name&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x90AE;&#x7BB1;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;email&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;email&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x6027;&#x522B;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;gender&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;gender&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,record</span>)=&gt;</span>(
                    val==<span class="hljs-number">1</span>?<span class="hljs-string">&apos;&#x7537;&apos;</span>:<span class="hljs-string">&apos;&#x5973;&apos;</span>
                )
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x64CD;&#x4F5C;&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;operation&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,record</span>) =&gt;</span> (
                    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Fragment</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span>=&gt;</span>this.onEdit(record)}&gt;&#x7F16;&#x8F91;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Popconfirm</span>
                            <span class="hljs-attr">okText</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&quot;</span>
                            <span class="hljs-attr">cancelText</span>=<span class="hljs-string">&quot;&#x53D6;&#x6D88;&quot;</span>
                            <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&#x5220;&#x9664;&#x6B64;&#x7528;&#x6237;&#x5417;?&quot;</span>
                            <span class="hljs-attr">onConfirm</span>=<span class="hljs-string">{()</span> =&gt;</span> this.onDel(record.id)}&gt;
                             <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>&#x5220;&#x9664;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-name">Popconfirm</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">Fragment</span>&gt;</span></span>
                )
            }
        ]
        <span class="hljs-keyword">let</span> {list,record,isCreate,editVisible,loading,dispatch,page,total}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">const</span> pagination={
            <span class="hljs-attr">current</span>: page,
            <span class="hljs-attr">pageSize</span>: PAGE_SIZE,
            <span class="hljs-attr">showQuickJumper</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">showTotal</span>: <span class="hljs-function">(<span class="hljs-params">total,range</span>) =&gt;</span> {
                <span class="hljs-keyword">return</span> <span class="hljs-string">`&#x5171;<span class="hljs-subst">${total}</span>&#x6761;`</span>;
            },
            total,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">page</span>) =&gt;</span> {
                <span class="hljs-comment">//router.push(`/admin/user?page=${page}`);</span>
                <span class="hljs-comment">//dispatch(routerRedux.push(`/admin/user?page=${page}`));</span>
                dispatch(routerRedux.push({
                    <span class="hljs-attr">pathname</span>: <span class="hljs-string">&apos;/admin/user&apos;</span>,
                    <span class="hljs-attr">query</span>:{page}
                }));
            }
        }
        <span class="hljs-keyword">const</span> rowSelection={
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;checkbox&apos;</span>,
            <span class="hljs-attr">selectedRowKeys</span>: <span class="hljs-keyword">this</span>.props.selectedRowKeys,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">selectedRowKeys,selectedRows</span>) =&gt;</span> {
                <span class="hljs-keyword">this</span>.save({selectedRowKeys});
            }
        }
        <span class="hljs-keyword">return</span> (
            &lt;Card&gt;
                &lt;Button type=&quot;warning&quot; onClick={this.onAdd}&gt;&#x6DFB;&#x52A0;&lt;/Button&gt;
                &lt;Table
                    columns={columns}
                    dataSource={list}
                    loading={loading}
                    rowKey={record =&gt; record.id}
                    pagination={pagination}
                    rowSelection={rowSelection}
                /&gt;
                &lt;EditModal
                    wrappedComponentRef={instance =&gt;this.editForm=instance}
                    isCreate={isCreate}
                    visible={editVisible}
                    onOk={this.onEditOk}
                    onCancel={this.onEditCancel}
                    record={record}
                /&gt;
            &lt;/Card&gt;
        )
    }
}

@Form.create()
class EditModal extends Component{
    render() {
        let {visible,onOk,isCreate,onCancel,record,form: {getFieldDecorator}}=this.props;
        let {name,email,id}=record;
        return (
            &lt;Modal
                title={isCreate?&apos;&#x521B;&#x5EFA;&#x7528;&#x6237;&apos;:&apos;&#x4FEE;&#x6539;&#x7528;&#x6237;&apos;}
                visible={visible}
                onOk={onOk}
                onCancel={onCancel}
                destroyOnClose
            &gt;
                &lt;Form&gt;
                    &lt;FormItem&gt;
                       {
                            getFieldDecorator(&apos;id&apos;,{
                                initialValue: id
                            })(&lt;Input type=&quot;hidden&quot; /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x7528;&#x6237;&#x540D;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;name&apos;,{
                                rules: [{
                                    required: true,
                                    message:&apos;&#x7528;&#x6237;&#x540D;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                                }],
                                initialValue: name
                            })(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x90AE;&#x7BB1;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;email&apos;,{
                                initialValue: email,
                                rules: [{required: true,message:&apos;&#x7528;&#x6237;&#x540D;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                            }]})(&lt;Input/&gt;)
                        }
                    &lt;/FormItem&gt;
                &lt;/Form&gt;
            &lt;/Modal&gt;
        )
    }
}
</code></pre>
<h3 id="t156.4 models/user.js">6.4 models/user.js <a href="#t156.4 models/user.js"> # </a></h3>
<p>src/pages/admin/user/models/user.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> userService <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../services/user&apos;</span>;

<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">namespace</span>: <span class="hljs-string">&apos;users&apos;</span>,
    <span class="hljs-attr">state</span>: {
        <span class="hljs-attr">list</span>: [],
        <span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,
        <span class="hljs-attr">editVisible</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">page</span>:<span class="hljs-number">1</span>,
        <span class="hljs-attr">record</span>: {},
        <span class="hljs-attr">selectedRowKeys</span>:[]
    },
    <span class="hljs-attr">reducers</span>: {
        save(state,{payload}) {
            <span class="hljs-keyword">return</span> {...state,...payload};
        }
    },
    <span class="hljs-attr">effects</span>: {
        *fetch({<span class="hljs-attr">payload</span>: {page=<span class="hljs-number">1</span>}},{call,put}) {
            <span class="hljs-keyword">const</span> {list,total}=<span class="hljs-keyword">yield</span> call(userService.fetch,page);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{list,<span class="hljs-attr">page</span>:<span class="hljs-built_in">parseInt</span>(page),total}});
        },
        *create({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(userService.create,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">page</span>:<span class="hljs-number">1</span>}});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{<span class="hljs-attr">editVisible</span>:<span class="hljs-literal">false</span>}});
        },
        *update({payload},{call,put,select}) {
            <span class="hljs-keyword">yield</span> call(userService.update,payload);
            <span class="hljs-keyword">let</span> page=<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span>=&gt;</span>state.users.page);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {page}});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{<span class="hljs-attr">editVisible</span>:<span class="hljs-literal">false</span>}});
        },
        *del({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(userService.del,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">page</span>:<span class="hljs-number">1</span>}});
        }
    },
    <span class="hljs-attr">subscriptions</span>: {
        setup({dispatch,history}) {
            <span class="hljs-keyword">return</span> history.listen(<span class="hljs-function">(<span class="hljs-params">{pathname,query}</span>) =&gt;</span> {
                <span class="hljs-keyword">if</span> (pathname === <span class="hljs-string">&apos;/admin/user&apos;</span>) {
                    dispatch({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>:query});
                }
            });
        }
    }
}
</code></pre>
<h3 id="t166.5 services/user.js">6.5 services/user.js <a href="#t166.5 services/user.js"> # </a></h3>
<p>src/pages/admin/user/services/user.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> request <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;@/utils/request&apos;</span>;
<span class="hljs-keyword">import</span> {PAGE_SIZE} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../constants&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fetch</span>(<span class="hljs-params">page</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/user?pageNum=<span class="hljs-subst">${page}</span>&amp;pageSize=<span class="hljs-subst">${PAGE_SIZE}</span>`</span>);
}

<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">create</span>(<span class="hljs-params">values</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/user`</span>,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;POST&apos;</span>,
        <span class="hljs-attr">headers</span>:{<span class="hljs-string">&quot;Content-Type&quot;</span>:<span class="hljs-string">&quot;application/json&quot;</span>},
        <span class="hljs-attr">body</span>:<span class="hljs-built_in">JSON</span>.stringify(values)
    });
}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">update</span>(<span class="hljs-params">values</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/user/<span class="hljs-subst">${values.id}</span>`</span>,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;PUT&apos;</span>,
        <span class="hljs-attr">headers</span>:{<span class="hljs-string">&quot;Content-Type&quot;</span>:<span class="hljs-string">&quot;application/json&quot;</span>},
        <span class="hljs-attr">body</span>:<span class="hljs-built_in">JSON</span>.stringify(values)
    });
}

<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">del</span>(<span class="hljs-params">id</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/user/<span class="hljs-subst">${id}</span>`</span>,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;DELETE&apos;</span>
    });
}
</code></pre>
<h3 id="t176.6 utils/request.js">6.6 utils/request.js <a href="#t176.6 utils/request.js"> # </a></h3>
<p>src/utils/request.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> fetch <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva/fetch&apos;</span>;

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">parseJSON</span>(<span class="hljs-params">response</span>) </span>{
  <span class="hljs-keyword">return</span> response.json();
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">checkCode</span>(<span class="hljs-params">response</span>) </span>{
  <span class="hljs-keyword">if</span> (response.code === <span class="hljs-number">0</span>) {
    <span class="hljs-keyword">return</span> response.data;
  }
  <span class="hljs-keyword">const</span> error = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(response.error);
  error.response = response;
  <span class="hljs-keyword">throw</span> error;
}

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">checkStatus</span>(<span class="hljs-params">response</span>) </span>{
  <span class="hljs-keyword">if</span> (response.status &gt;= <span class="hljs-number">200</span> &amp;&amp; response.status &lt; <span class="hljs-number">300</span>) {
    <span class="hljs-keyword">return</span> response;
  }

  <span class="hljs-keyword">const</span> error = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(response.statusText);
  error.response = response;
  <span class="hljs-keyword">throw</span> error;
}

<span class="hljs-comment">/**
 * Requests a URL, returning a promise.
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to &quot;fetch&quot;
 * @return {object}           An object containing either &quot;data&quot; or &quot;err&quot;
 */</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">request</span>(<span class="hljs-params">url, options</span>) </span>{
  <span class="hljs-keyword">return</span> fetch(url, options)
    .then(checkStatus)
    .then(parseJSON)
    .then(checkCode)
    .catch(<span class="hljs-function"><span class="hljs-params">err</span> =&gt;</span> ({ err }));
}
</code></pre>
<h2 id="t187.&#x5168;&#x90E8;&#x5220;&#x9664;">7.&#x5168;&#x90E8;&#x5220;&#x9664; <a href="#t187.&#x5168;&#x90E8;&#x5220;&#x9664;"> # </a></h2>
<h3 id="t197.1 user/index.js">7.1 user/index.js <a href="#t197.1 user/index.js"> # </a></h3>
<p>src/pages/admin/user/index.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component,Fragment} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {connect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">import</span> {Card,Table,Button,Modal,Form,Input,message,Popconfirm} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> {PAGE_SIZE} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./constants&apos;</span>;
<span class="hljs-keyword">import</span> { routerRedux } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva/router&apos;</span>;
<span class="hljs-keyword">const</span> FormItem=Form.Item;
@connect(
    <span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> ({...state.user,<span class="hljs-attr">loading</span>:state.loading.models.users})
)
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Users</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    save = <span class="hljs-function">(<span class="hljs-params">payload</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;user/save&apos;</span>,
            payload
        });
    }
    onAdd=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,<span class="hljs-attr">record</span>: {} });
    }
    onEdit=<span class="hljs-function">(<span class="hljs-params">record</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">false</span>,record});
    }
    onEditCancel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({ <span class="hljs-attr">editVisible</span> : <span class="hljs-literal">false</span> });
    }
    onEditOk=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.editForm.props.form.validateFields(<span class="hljs-function">(<span class="hljs-params">err,values</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (err) {
                <span class="hljs-keyword">return</span> message.error(<span class="hljs-string">&apos;&#x8868;&#x5355;&#x6821;&#x9A8C;&#x5931;&#x8D25;!&apos;</span>);
            } <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">this</span>.props.dispatch({
                    <span class="hljs-attr">type</span>: <span class="hljs-keyword">this</span>.props.isCreate?<span class="hljs-string">&apos;user/create&apos;</span>:<span class="hljs-string">&apos;user/update&apos;</span>,
                    <span class="hljs-attr">payload</span>:values
                });
            }
        });
    }
    onDel=<span class="hljs-function">(<span class="hljs-params">id</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;user/del&apos;</span>,
            <span class="hljs-attr">payload</span>:id
        });
    }
    onAllDel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;user/delAll&apos;</span>,
            <span class="hljs-attr">payload</span>:<span class="hljs-keyword">this</span>.props.selectedRowKeys
        });
    }
    render() {
        <span class="hljs-keyword">const</span> columns=[
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x7528;&#x6237;&#x540D;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;name&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;name&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x90AE;&#x7BB1;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;email&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;email&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x6027;&#x522B;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;gender&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;gender&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,record</span>)=&gt;</span>(
                    val==<span class="hljs-number">1</span>?<span class="hljs-string">&apos;&#x7537;&apos;</span>:<span class="hljs-string">&apos;&#x5973;&apos;</span>
                )
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x64CD;&#x4F5C;&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;operation&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,record</span>) =&gt;</span> (
                    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Fragment</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span>=&gt;</span>this.onEdit(record)}&gt;&#x7F16;&#x8F91;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Popconfirm</span>
                            <span class="hljs-attr">okText</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&quot;</span>
                            <span class="hljs-attr">cancelText</span>=<span class="hljs-string">&quot;&#x53D6;&#x6D88;&quot;</span>
                            <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&#x5220;&#x9664;&#x6B64;&#x7528;&#x6237;&#x5417;?&quot;</span>
                            <span class="hljs-attr">onConfirm</span>=<span class="hljs-string">{()</span> =&gt;</span> this.onDel(record.id)}&gt;
                             <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>&#x5220;&#x9664;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-name">Popconfirm</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">Fragment</span>&gt;</span></span>
                )
            }
        ]
        <span class="hljs-keyword">let</span> {list,record,isCreate,editVisible,loading,dispatch,page,total}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">const</span> pagination={
            <span class="hljs-attr">current</span>: page,
            <span class="hljs-attr">pageSize</span>: PAGE_SIZE,
            <span class="hljs-attr">showQuickJumper</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">showTotal</span>: <span class="hljs-function">(<span class="hljs-params">total,range</span>) =&gt;</span> {
                <span class="hljs-keyword">return</span> <span class="hljs-string">`&#x5171;<span class="hljs-subst">${total}</span>&#x6761;`</span>;
            },
            total,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">page</span>) =&gt;</span> {
                <span class="hljs-comment">//router.push(`/admin/user?page=${page}`);</span>
                <span class="hljs-comment">//dispatch(routerRedux.push(`/admin/user?page=${page}`));</span>
                dispatch(routerRedux.push({
                    <span class="hljs-attr">pathname</span>: <span class="hljs-string">&apos;/admin/user&apos;</span>,
                    <span class="hljs-attr">query</span>:{page}
                }));
            }
        }
        <span class="hljs-keyword">const</span> rowSelection={
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;checkbox&apos;</span>,
            <span class="hljs-attr">selectedRowKeys</span>: <span class="hljs-keyword">this</span>.props.selectedRowKeys,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">selectedRowKeys,selectedRows</span>) =&gt;</span> {
                <span class="hljs-keyword">this</span>.save({selectedRowKeys});
            }
        }
        <span class="hljs-keyword">return</span> (
            &lt;Card&gt;
                &lt;Button.Group&gt;
                    &lt;Button type=&quot;warning&quot; onClick={this.onAdd}&gt;&#x6DFB;&#x52A0;&lt;/Button&gt;
                    &lt;Button type=&quot;danger&quot; onClick={this.onAllDel}&gt;&#x5168;&#x90E8;&#x5220;&#x9664;&lt;/Button&gt;
                &lt;/Button.Group&gt;

                &lt;Table
                    columns={columns}
                    dataSource={list}
                    loading={loading}
                    rowKey={record =&gt; record.id}
                    pagination={pagination}
                    rowSelection={rowSelection}
                /&gt;
                &lt;EditModal
                    wrappedComponentRef={instance =&gt;this.editForm=instance}
                    isCreate={isCreate}
                    visible={editVisible}
                    onOk={this.onEditOk}
                    onCancel={this.onEditCancel}
                    record={record}
                /&gt;
            &lt;/Card&gt;
        )
    }
}

@Form.create()
class EditModal extends Component{
    render() {
        let {visible,onOk,isCreate,onCancel,record,form: {getFieldDecorator}}=this.props;
        let {name,email,id}=record;
        return (
            &lt;Modal
                title={isCreate?&apos;&#x521B;&#x5EFA;&#x7528;&#x6237;&apos;:&apos;&#x4FEE;&#x6539;&#x7528;&#x6237;&apos;}
                visible={visible}
                onOk={onOk}
                onCancel={onCancel}
                destroyOnClose
            &gt;
                &lt;Form&gt;
                    &lt;FormItem&gt;
                       {
                            getFieldDecorator(&apos;id&apos;,{
                                initialValue: id
                            })(&lt;Input type=&quot;hidden&quot; /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x7528;&#x6237;&#x540D;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;name&apos;,{
                                rules: [{
                                    required: true,
                                    message:&apos;&#x7528;&#x6237;&#x540D;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                                }],
                                initialValue: name
                            })(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x90AE;&#x7BB1;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;email&apos;,{
                                initialValue: email,
                                rules: [{required: true,message:&apos;&#x7528;&#x6237;&#x540D;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                            }]})(&lt;Input/&gt;)
                        }
                    &lt;/FormItem&gt;
                &lt;/Form&gt;
            &lt;/Modal&gt;
        )
    }
}
</code></pre>
<h3 id="t207.2 models/user.js">7.2 models/user.js <a href="#t207.2 models/user.js"> # </a></h3>
<p>src/pages/admin/user/models/user.js</p>
<pre><code class="lang-diff"><span class="hljs-addition">+        *delAll({payload},{call,put}) {</span>
<span class="hljs-addition">+            yield call(userService.delAll,payload);</span>
<span class="hljs-addition">+            yield put({type: &apos;fetch&apos;,payload: {page:1}});</span>
</code></pre>
<h3 id="t217.3 services/user.js">7.3 services/user.js <a href="#t217.3 services/user.js"> # </a></h3>
<p>src/pages/admin/user/services/user.js</p>
<pre><code class="lang-diff"><span class="hljs-addition">+ export function delAll(ids) {</span>
<span class="hljs-addition">+     return request(`/api/user/${ids[0]}`,{</span>
<span class="hljs-addition">+         method: &apos;DELETE&apos;,</span>
<span class="hljs-addition">+         headers:{&quot;Content-Type&quot;:&quot;application/json&quot;},</span>
<span class="hljs-addition">+         body:JSON.stringify(ids)</span>
<span class="hljs-addition">+     });</span>
</code></pre>
<h2 id="t228. &#x641C;&#x7D22;">8. &#x641C;&#x7D22; <a href="#t228. &#x641C;&#x7D22;"> # </a></h2>
<h3 id="t238.1 user/index.js">8.1 user/index.js <a href="#t238.1 user/index.js"> # </a></h3>
<p>src/pages/admin/user/index.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component,Fragment} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {connect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">import</span> {Card,Table,Button,Modal,Form,Input,message,Popconfirm} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> {PAGE_SIZE} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./constants&apos;</span>;
<span class="hljs-keyword">import</span> { routerRedux } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva/router&apos;</span>;
<span class="hljs-keyword">const</span> FormItem=Form.Item;
@connect(
    <span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> ({...state.user,<span class="hljs-attr">loading</span>:state.loading.models.users})
)
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Users</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    save = <span class="hljs-function">(<span class="hljs-params">payload</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;user/save&apos;</span>,
            payload
        });
    }
    onAdd=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,<span class="hljs-attr">record</span>: {} });
    }
    onEdit=<span class="hljs-function">(<span class="hljs-params">record</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">false</span>,record});
    }
    onEditCancel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({ <span class="hljs-attr">editVisible</span> : <span class="hljs-literal">false</span> });
    }
    onEditOk=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.editForm.props.form.validateFields(<span class="hljs-function">(<span class="hljs-params">err,values</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (err) {
                <span class="hljs-keyword">return</span> message.error(<span class="hljs-string">&apos;&#x8868;&#x5355;&#x6821;&#x9A8C;&#x5931;&#x8D25;!&apos;</span>);
            } <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">this</span>.props.dispatch({
                    <span class="hljs-attr">type</span>: <span class="hljs-keyword">this</span>.props.isCreate?<span class="hljs-string">&apos;user/create&apos;</span>:<span class="hljs-string">&apos;user/update&apos;</span>,
                    <span class="hljs-attr">payload</span>:values
                });
            }
        });
    }
    onDel=<span class="hljs-function">(<span class="hljs-params">id</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;user/del&apos;</span>,
            <span class="hljs-attr">payload</span>:id
        });
    }
    onAllDel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;user/delAll&apos;</span>,
            <span class="hljs-attr">payload</span>:<span class="hljs-keyword">this</span>.props.selectedRowKeys
        });
    }
    onSearch=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">let</span> values=<span class="hljs-keyword">this</span>.searchForm.props.form.getFieldsValue();
        <span class="hljs-keyword">let</span> where=<span class="hljs-built_in">Object</span>.keys(values).reduce(<span class="hljs-function">(<span class="hljs-params">memo,key</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (values[key]){
                memo[key]=values[key];
            }
            <span class="hljs-keyword">return</span> memo;
        },{});
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;user/search&apos;</span>,
            <span class="hljs-attr">payload</span>:where
        });
    }
    render() {
        <span class="hljs-keyword">const</span> columns=[
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x7528;&#x6237;&#x540D;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;name&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;name&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x90AE;&#x7BB1;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;email&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;email&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x6027;&#x522B;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;gender&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;gender&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,record</span>)=&gt;</span>(
                    val==<span class="hljs-number">1</span>?<span class="hljs-string">&apos;&#x7537;&apos;</span>:<span class="hljs-string">&apos;&#x5973;&apos;</span>
                )
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x64CD;&#x4F5C;&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;operation&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,record</span>) =&gt;</span> (
                    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Fragment</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span>=&gt;</span>this.onEdit(record)}&gt;&#x7F16;&#x8F91;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Popconfirm</span>
                            <span class="hljs-attr">okText</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&quot;</span>
                            <span class="hljs-attr">cancelText</span>=<span class="hljs-string">&quot;&#x53D6;&#x6D88;&quot;</span>
                            <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&#x5220;&#x9664;&#x6B64;&#x7528;&#x6237;&#x5417;?&quot;</span>
                            <span class="hljs-attr">onConfirm</span>=<span class="hljs-string">{()</span> =&gt;</span> this.onDel(record.id)}&gt;
                             <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>&#x5220;&#x9664;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-name">Popconfirm</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">Fragment</span>&gt;</span></span>
                )
            }
        ]
        <span class="hljs-keyword">let</span> {list,record,isCreate,editVisible,loading,dispatch,page,total,where}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">const</span> pagination={
            <span class="hljs-attr">current</span>: page,
            <span class="hljs-attr">pageSize</span>: PAGE_SIZE,
            <span class="hljs-attr">showQuickJumper</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">showTotal</span>: <span class="hljs-function">(<span class="hljs-params">total,range</span>) =&gt;</span> {
                <span class="hljs-keyword">return</span> <span class="hljs-string">`&#x5171;<span class="hljs-subst">${total}</span>&#x6761;`</span>;
            },
            total,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">page</span>) =&gt;</span> {
                <span class="hljs-comment">//router.push(`/admin/user?page=${page}`);</span>
                <span class="hljs-comment">//dispatch(routerRedux.push(`/admin/user?page=${page}`));</span>
                dispatch(routerRedux.push({
                    <span class="hljs-attr">pathname</span>: <span class="hljs-string">&apos;/admin/user&apos;</span>,
                    <span class="hljs-attr">query</span>:{page}
                }));
            }
        }
        <span class="hljs-keyword">const</span> rowSelection={
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;checkbox&apos;</span>,
            <span class="hljs-attr">selectedRowKeys</span>: <span class="hljs-keyword">this</span>.props.selectedRowKeys,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">selectedRowKeys,selectedRows</span>) =&gt;</span> {
                <span class="hljs-keyword">this</span>.save({selectedRowKeys});
            }
        }
        <span class="hljs-keyword">return</span> (
            &lt;Fragment&gt;
                    &lt;Card&gt;
                    &lt;SearchForm
                        where={where}
                    onSearch={this.onSearch}
                    wrappedComponentRef={inst=&gt;this.searchForm=inst}
                /&gt;
            &lt;/Card&gt;
            &lt;Card&gt;
                &lt;Button.Group&gt;
                    &lt;Button type=&quot;warning&quot; onClick={this.onAdd}&gt;&#x6DFB;&#x52A0;&lt;/Button&gt;
                    &lt;Button type=&quot;danger&quot; onClick={this.onAllDel}&gt;&#x5168;&#x90E8;&#x5220;&#x9664;&lt;/Button&gt;
                &lt;/Button.Group&gt;

                &lt;Table
                    columns={columns}
                    dataSource={list}
                    loading={loading}
                    rowKey={record =&gt; record.id}
                    pagination={pagination}
                    rowSelection={rowSelection}
                /&gt;
                &lt;EditModal
                    wrappedComponentRef={instance =&gt;this.editForm=instance}
                    isCreate={isCreate}
                    visible={editVisible}
                    onOk={this.onEditOk}
                    onCancel={this.onEditCancel}
                    record={record}
                /&gt;
            &lt;/Card&gt;
          &lt;/Fragment&gt;
        )
    }
}

@Form.create()
class SearchForm extends Component{
    render() {
        let {form: {getFieldDecorator},onSearch,where={}}=this.props;
        return (
            &lt;Form layout=&quot;inline&quot;&gt;
                    &lt;FormItem
                        label=&quot;&#x7528;&#x6237;&#x540D;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;name&apos;,{initialValue:where.name})(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x90AE;&#x7BB1;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;email&apos;,{initialValue:where.email})(&lt;Input/&gt;)
                        }
                &lt;/FormItem&gt;
                &lt;FormItem&gt;
                    &lt;Button onClick={onSearch} shape=&quot;circle&quot; icon=&quot;search&quot;&gt;&lt;/Button&gt;
                &lt;/FormItem&gt;
                &lt;/Form&gt;
        )
    }
}

@Form.create()
class EditModal extends Component{
    render() {
        let {visible,onOk,isCreate,onCancel,record,form: {getFieldDecorator}}=this.props;
        let {name,email,id}=record;
        return (
            &lt;Modal
                title={isCreate?&apos;&#x521B;&#x5EFA;&#x7528;&#x6237;&apos;:&apos;&#x4FEE;&#x6539;&#x7528;&#x6237;&apos;}
                visible={visible}
                onOk={onOk}
                onCancel={onCancel}
                destroyOnClose
            &gt;
                &lt;Form&gt;
                    &lt;FormItem&gt;
                       {
                            getFieldDecorator(&apos;id&apos;,{
                                initialValue: id
                            })(&lt;Input type=&quot;hidden&quot; /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x7528;&#x6237;&#x540D;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;name&apos;,{
                                rules: [{
                                    required: true,
                                    message:&apos;&#x7528;&#x6237;&#x540D;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                                }],
                                initialValue: name
                            })(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x90AE;&#x7BB1;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;email&apos;,{
                                initialValue: email,
                                rules: [{required: true,message:&apos;&#x7528;&#x6237;&#x540D;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                            }]})(&lt;Input/&gt;)
                        }
                    &lt;/FormItem&gt;
                &lt;/Form&gt;
            &lt;/Modal&gt;
        )
    }
}
</code></pre>
<h3 id="t248.2 models/user.js">8.2 models/user.js <a href="#t248.2 models/user.js"> # </a></h3>
<p>src/pages/admin/user/models/user.js</p>
<pre><code class="lang-diff"><span class="hljs-addition">+        where: {}</span>

<span class="hljs-addition">+        *fetch({payload: {page,where}},{call,put,select}) {</span>
<span class="hljs-addition">+            if (!where) {</span>
<span class="hljs-addition">+                where =yield select(state =&gt; state.user.where);</span>
<span class="hljs-addition">+            }</span>
<span class="hljs-addition">+            if (!page) {</span>
<span class="hljs-addition">+                page =yield select(state =&gt; state.user.page);</span>
<span class="hljs-addition">+            }</span>
<span class="hljs-addition">+            const {list,total}=yield call(userService.fetch,page,where);</span>
<span class="hljs-addition">+            yield put({type:&apos;save&apos;,payload:{page,where,list,page:parseInt(page),total}});</span>
<span class="hljs-addition">+        },</span>
<span class="hljs-addition">+        *search({payload:where},{call,put}) {</span>
<span class="hljs-addition">+            yield put({type: &apos;fetch&apos;,payload: {page:1,where}});</span>
<span class="hljs-addition">+        },</span>
</code></pre>
<h2 id="t259. &#x70B9;&#x51FB;&#x9009;&#x62E9;&#x884C;">9. &#x70B9;&#x51FB;&#x9009;&#x62E9;&#x884C; <a href="#t259. &#x70B9;&#x51FB;&#x9009;&#x62E9;&#x884C;"> # </a></h2>
<h3 id="t269.1 user/index.js">9.1 user/index.js <a href="#t269.1 user/index.js"> # </a></h3>
<p>src/pages/admin/user/index.js</p>
<pre><code class="lang-diff">    rowSelection={rowSelection}
<span class="hljs-addition">+    onRow={</span>
<span class="hljs-addition">+        (record) =&gt; {</span>
<span class="hljs-addition">+                return {</span>
<span class="hljs-addition">+                onClick: () =&gt; {</span>
<span class="hljs-addition">+                let selectedRowKeys = this.props.selectedRowKeys;</span>
<span class="hljs-addition">+                let index = selectedRowKeys.indexOf(record.id);</span>
<span class="hljs-addition">+                if (index==-1) {</span>
<span class="hljs-addition">+                    selectedRowKeys=[...selectedRowKeys,record.id];</span>
<span class="hljs-addition">+                } else {</span>
<span class="hljs-addition">+                    selectedRowKeys=selectedRowKeys.filter(key=&gt;key != record.id);</span>
<span class="hljs-addition">+                }</span>
<span class="hljs-addition">+                    this.save({selectedRowKeys});</span>
<span class="hljs-addition">+                }</span>
<span class="hljs-addition">+                }    </span>
<span class="hljs-addition">+                }</span>
<span class="hljs-addition">+        }</span>
</code></pre>
<h2 id="t2710. &#x89D2;&#x8272;&#x7BA1;&#x7406;">10. &#x89D2;&#x8272;&#x7BA1;&#x7406; <a href="#t2710. &#x89D2;&#x8272;&#x7BA1;&#x7406;"> # </a></h2>
<h3 id="t2810.1 role/index.js">10.1 role/index.js <a href="#t2810.1 role/index.js"> # </a></h3>
<p>src/pages/admin/role/index.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component,Fragment} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {connect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">import</span> {Card,Table,Button,Modal,Form,Input,message,Popconfirm} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> {PAGE_SIZE} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./constants&apos;</span>;
<span class="hljs-keyword">import</span> { routerRedux } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva/router&apos;</span>;
<span class="hljs-keyword">const</span> FormItem=Form.Item;
<span class="hljs-keyword">const</span> ENTITY=<span class="hljs-string">&apos;role&apos;</span>;
@connect(
    <span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> ({...state[ENTITY],<span class="hljs-attr">loading</span>:state.loading.models[ENTITY]})
)
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Enity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    save = <span class="hljs-function">(<span class="hljs-params">payload</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/save`</span>,
            payload
        });
    }
    onAdd=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,<span class="hljs-attr">record</span>: {} });
    }
    onEdit=<span class="hljs-function">(<span class="hljs-params">record</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">false</span>,record});
    }
    onEditCancel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({ <span class="hljs-attr">editVisible</span> : <span class="hljs-literal">false</span> });
    }
    onEditOk=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.editForm.props.form.validateFields(<span class="hljs-function">(<span class="hljs-params">err,values</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (err) {
                <span class="hljs-keyword">return</span> message.error(<span class="hljs-string">&apos;&#x8868;&#x5355;&#x6821;&#x9A8C;&#x5931;&#x8D25;!&apos;</span>);
            } <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">this</span>.props.dispatch({
                    <span class="hljs-attr">type</span>: <span class="hljs-keyword">this</span>.props.isCreate?<span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/create`</span>:<span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/update`</span>,
                    <span class="hljs-attr">payload</span>:values
                });
            }
        });
    }
    onDel=<span class="hljs-function">(<span class="hljs-params">id</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/del`</span>,
            <span class="hljs-attr">payload</span>:id
        });
    }
    onAllDel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/delAll`</span>,
            <span class="hljs-attr">payload</span>:<span class="hljs-keyword">this</span>.props.selectedRowKeys
        });
    }
    onSearch=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">let</span> values=<span class="hljs-keyword">this</span>.searchForm.props.form.getFieldsValue();
        <span class="hljs-keyword">let</span> where=<span class="hljs-built_in">Object</span>.keys(values).reduce(<span class="hljs-function">(<span class="hljs-params">memo,key</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (values[key]){
                memo[key]=values[key];
            }
            <span class="hljs-keyword">return</span> memo;
        },{});
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/search`</span>,
            <span class="hljs-attr">payload</span>:where
        });
    }
    render() {
        <span class="hljs-keyword">const</span> columns=[
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x540D;&#x79F0;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;name&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;name&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x64CD;&#x4F5C;&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;operation&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,record</span>) =&gt;</span> (
                    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Fragment</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span>=&gt;</span>this.onEdit(record)}&gt;&#x7F16;&#x8F91;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Popconfirm</span>
                            <span class="hljs-attr">okText</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&quot;</span>
                            <span class="hljs-attr">cancelText</span>=<span class="hljs-string">&quot;&#x53D6;&#x6D88;&quot;</span>
                            <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&#x5220;&#x9664;&#x6B64;&#x8BB0;&#x5F55;&#x5417;?&quot;</span>
                            <span class="hljs-attr">onConfirm</span>=<span class="hljs-string">{()</span> =&gt;</span> this.onDel(record.id)}&gt;
                             <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>&#x5220;&#x9664;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-name">Popconfirm</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">Fragment</span>&gt;</span></span>
                )
            }
        ]
        <span class="hljs-keyword">let</span> {list,record,isCreate,editVisible,loading,dispatch,page,total,where}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">const</span> pagination={
            <span class="hljs-attr">current</span>: page,
            <span class="hljs-attr">pageSize</span>: PAGE_SIZE,
            <span class="hljs-attr">showQuickJumper</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">showTotal</span>: <span class="hljs-function">(<span class="hljs-params">total,range</span>) =&gt;</span> {
                <span class="hljs-keyword">return</span> <span class="hljs-string">`&#x5171;<span class="hljs-subst">${total}</span>&#x6761;`</span>;
            },
            total,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">page</span>) =&gt;</span> {
                <span class="hljs-comment">//router.push(`/admin/user?page=${page}`);</span>
                <span class="hljs-comment">//dispatch(routerRedux.push(`/admin/user?page=${page}`));</span>
                dispatch(routerRedux.push({
                    <span class="hljs-attr">pathname</span>: <span class="hljs-string">`/admin/<span class="hljs-subst">${ENTITY}</span>`</span>,
                    <span class="hljs-attr">query</span>:{page}
                }));
            }
        }
        <span class="hljs-keyword">const</span> rowSelection={
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;checkbox&apos;</span>,
            <span class="hljs-attr">selectedRowKeys</span>: <span class="hljs-keyword">this</span>.props.selectedRowKeys,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">selectedRowKeys,selectedRows</span>) =&gt;</span> {
                <span class="hljs-keyword">this</span>.save({selectedRowKeys});
            }
        }
        <span class="hljs-keyword">return</span> (
            &lt;Fragment&gt;
                    &lt;Card&gt;
                    &lt;SearchForm
                        where={where}
                    onSearch={this.onSearch}
                    wrappedComponentRef={inst=&gt;this.searchForm=inst}
                /&gt;
            &lt;/Card&gt;
            &lt;Card&gt;
                &lt;Button.Group&gt;
                    &lt;Button type=&quot;warning&quot; onClick={this.onAdd}&gt;&#x6DFB;&#x52A0;&lt;/Button&gt;
                    &lt;Button type=&quot;danger&quot; onClick={this.onAllDel}&gt;&#x5168;&#x90E8;&#x5220;&#x9664;&lt;/Button&gt;
                &lt;/Button.Group&gt;

                &lt;Table
                    columns={columns}
                    dataSource={list}
                    loading={loading}
                    rowKey={record =&gt; record.id}
                    pagination={pagination}
                        rowSelection={rowSelection}
                        onRow={
                            (record) =&gt; {
                                return {
                                    onClick: () =&gt; {
                                        let selectedRowKeys = this.props.selectedRowKeys;
                                        let index = selectedRowKeys.indexOf(record.id);
                                        if (index==-1) {
                                            selectedRowKeys=[...selectedRowKeys,record.id];
                                        } else {
                                            selectedRowKeys=selectedRowKeys.filter(key=&gt;key != record.id);
                                        }
                                        this.save({selectedRowKeys});
                                    }
                                }    
                            }
                        }
                /&gt;
                &lt;EditModal
                    wrappedComponentRef={instance =&gt;this.editForm=instance}
                    isCreate={isCreate}
                    visible={editVisible}
                    onOk={this.onEditOk}
                    onCancel={this.onEditCancel}
                    record={record}
                /&gt;
            &lt;/Card&gt;
          &lt;/Fragment&gt;
        )
    }
}

@Form.create()
class SearchForm extends Component{
    render() {
        let {form: {getFieldDecorator},onSearch,where={}}=this.props;
        return (
            &lt;Form layout=&quot;inline&quot;&gt;
                    &lt;FormItem
                        label=&quot;&#x89D2;&#x8272;&#x540D;&#x79F0;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;name&apos;,{initialValue:where.name})(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                &lt;FormItem&gt;
                    &lt;Button onClick={onSearch} shape=&quot;circle&quot; icon=&quot;search&quot;&gt;&lt;/Button&gt;
                &lt;/FormItem&gt;
                &lt;/Form&gt;
        )
    }
}

@Form.create()
class EditModal extends Component{
    render() {
        let {visible,onOk,isCreate,onCancel,record,form: {getFieldDecorator}}=this.props;
        let {name,email,id}=record;
        return (
            &lt;Modal
                title={isCreate?&apos;&#x521B;&#x5EFA;&apos;:&apos;&#x4FEE;&#x6539;&apos;}
                visible={visible}
                onOk={onOk}
                onCancel={onCancel}
                destroyOnClose
            &gt;
                &lt;Form&gt;
                    &lt;FormItem&gt;
                       {
                            getFieldDecorator(&apos;id&apos;,{
                                initialValue: id
                            })(&lt;Input type=&quot;hidden&quot; /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x89D2;&#x8272;&#x540D;&#x79F0;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;name&apos;,{
                                rules: [{
                                    required: true,
                                    message:&apos;&#x89D2;&#x8272;&#x540D;&#x79F0;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                                }],
                                initialValue: name
                            })(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                &lt;/Form&gt;
            &lt;/Modal&gt;
        )
    }
}
</code></pre>
<h3 id="t2910.2 models/role.js">10.2 models/role.js <a href="#t2910.2 models/role.js"> # </a></h3>
<p>src/pages/admin/role/models/role.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> service <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../services/role&apos;</span>;
<span class="hljs-keyword">const</span> ENTITY=<span class="hljs-string">&apos;role&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">namespace</span>: ENTITY,
    <span class="hljs-attr">state</span>: {
        <span class="hljs-attr">list</span>: [],
        <span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,
        <span class="hljs-attr">editVisible</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">page</span>:<span class="hljs-number">1</span>,
        <span class="hljs-attr">record</span>: {},
        <span class="hljs-attr">selectedRowKeys</span>: [],
        <span class="hljs-attr">where</span>: {}
    },
    <span class="hljs-attr">reducers</span>: {
        save(state,{payload}) {
            <span class="hljs-keyword">return</span> {...state,...payload};
        }
    },
    <span class="hljs-attr">effects</span>: {
        *fetch({<span class="hljs-attr">payload</span>: {page,where}},{call,put,select}) {
            <span class="hljs-keyword">if</span> (!where) {
                where =<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state[ENTITY].where);
            }
            <span class="hljs-keyword">if</span> (!page) {
                page =<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state[ENTITY].page);
            }
            <span class="hljs-keyword">const</span> {list,total}=<span class="hljs-keyword">yield</span> call(service.fetch,page,where);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{page,where,list,<span class="hljs-attr">page</span>:<span class="hljs-built_in">parseInt</span>(page),total}});
        },
        *search({<span class="hljs-attr">payload</span>:where},{call,put}) {
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">page</span>:<span class="hljs-number">1</span>,where}});
        },
        *create({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(service.create,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">page</span>:<span class="hljs-number">1</span>}});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{<span class="hljs-attr">editVisible</span>:<span class="hljs-literal">false</span>}});
        },
        *update({payload},{call,put,select}) {
            <span class="hljs-keyword">yield</span> call(service.update,payload);
            <span class="hljs-keyword">let</span> page=<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span>=&gt;</span>state[ENTITY].page);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {page}});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{<span class="hljs-attr">editVisible</span>:<span class="hljs-literal">false</span>}});
        },
        *del({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(service.del,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">page</span>:<span class="hljs-number">1</span>}});
        },
        *delAll({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(service.delAll,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">page</span>:<span class="hljs-number">1</span>}});
        }
    },
    <span class="hljs-attr">subscriptions</span>: {
        setup({dispatch,history}) {
            <span class="hljs-keyword">return</span> history.listen(<span class="hljs-function">(<span class="hljs-params">{pathname,query}</span>) =&gt;</span> {
                <span class="hljs-keyword">if</span> (pathname === <span class="hljs-string">`/admin/<span class="hljs-subst">${ENTITY}</span>`</span>) {
                    dispatch({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>:query});
                }
            });
        }
    }
}
</code></pre>
<h3 id="t3010.3 services/role.js">10.3 services/role.js <a href="#t3010.3 services/role.js"> # </a></h3>
<p>src/pages/admin/role/services/role.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> request <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;@/utils/request&apos;</span>;
<span class="hljs-keyword">import</span> {PAGE_SIZE} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../constants&apos;</span>;
<span class="hljs-keyword">import</span> querystring <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;querystring&apos;</span>;
<span class="hljs-keyword">const</span> ENTITY=<span class="hljs-string">&apos;role&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fetch</span>(<span class="hljs-params">page,where</span>) </span>{
    <span class="hljs-keyword">let</span> whereString=querystring.stringify(where);
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>?pageNum=<span class="hljs-subst">${page}</span>&amp;pageSize=<span class="hljs-subst">${PAGE_SIZE}</span>&amp;<span class="hljs-subst">${whereString}</span>`</span>);
}

<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">create</span>(<span class="hljs-params">values</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>`</span>,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;POST&apos;</span>,
        <span class="hljs-attr">headers</span>:{<span class="hljs-string">&quot;Content-Type&quot;</span>:<span class="hljs-string">&quot;application/json&quot;</span>},
        <span class="hljs-attr">body</span>:<span class="hljs-built_in">JSON</span>.stringify(values)
    });
}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">update</span>(<span class="hljs-params">values</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>/<span class="hljs-subst">${values.id}</span>`</span>,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;PUT&apos;</span>,
        <span class="hljs-attr">headers</span>:{<span class="hljs-string">&quot;Content-Type&quot;</span>:<span class="hljs-string">&quot;application/json&quot;</span>},
        <span class="hljs-attr">body</span>:<span class="hljs-built_in">JSON</span>.stringify(values)
    });
}

<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">del</span>(<span class="hljs-params">id</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>/<span class="hljs-subst">${id}</span>`</span>,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;DELETE&apos;</span>
    });
}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">delAll</span>(<span class="hljs-params">ids</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>/<span class="hljs-subst">${ids[<span class="hljs-number">0</span>]}</span>`</span>,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;DELETE&apos;</span>,
        <span class="hljs-attr">headers</span>:{<span class="hljs-string">&quot;Content-Type&quot;</span>:<span class="hljs-string">&quot;application/json&quot;</span>},
        <span class="hljs-attr">body</span>:<span class="hljs-built_in">JSON</span>.stringify(ids)
    });
}
</code></pre>
<h2 id="t3111. &#x8BBE;&#x7F6E;&#x6743;&#x9650;">11. &#x8BBE;&#x7F6E;&#x6743;&#x9650; <a href="#t3111. &#x8BBE;&#x7F6E;&#x6743;&#x9650;"> # </a></h2>
<h3 id="t3211.1 role/index.js">11.1 role/index.js <a href="#t3211.1 role/index.js"> # </a></h3>
<p>src/pages/admin/role/index.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> React,{Component,Fragment} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;react&apos;</span>;
<span class="hljs-keyword">import</span> {connect} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva&apos;</span>;
<span class="hljs-keyword">import</span> {Card,Table,Button,Modal,Form,Input,message,Popconfirm,Tree} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;antd&apos;</span>;
<span class="hljs-keyword">import</span> {PAGE_SIZE} <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;./constants&apos;</span>;
<span class="hljs-keyword">import</span> { routerRedux } <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;dva/router&apos;</span>;
<span class="hljs-keyword">const</span> FormItem=Form.Item;
<span class="hljs-keyword">const</span> ENTITY=<span class="hljs-string">&apos;role&apos;</span>;
<span class="hljs-keyword">const</span> TreeNode=Tree.TreeNode;
@connect(
    <span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> ({...state[ENTITY],<span class="hljs-attr">loading</span>:state.loading.models[ENTITY]})
)
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Enity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span></span>{
    save = <span class="hljs-function">(<span class="hljs-params">payload</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/save`</span>,
            payload
        });
    }
    onAdd=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,<span class="hljs-attr">record</span>: {} });
    }
    onEdit=<span class="hljs-function">(<span class="hljs-params">record</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">editVisible</span>: <span class="hljs-literal">true</span>,<span class="hljs-attr">isCreate</span>:<span class="hljs-literal">false</span>,record});
    }
    onEditCancel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({ <span class="hljs-attr">editVisible</span> : <span class="hljs-literal">false</span> });
    }
    onEditOk=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.editForm.props.form.validateFields(<span class="hljs-function">(<span class="hljs-params">err,values</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (err) {
                <span class="hljs-keyword">return</span> message.error(<span class="hljs-string">&apos;&#x8868;&#x5355;&#x6821;&#x9A8C;&#x5931;&#x8D25;!&apos;</span>);
            } <span class="hljs-keyword">else</span> {
                <span class="hljs-keyword">this</span>.props.dispatch({
                    <span class="hljs-attr">type</span>: <span class="hljs-keyword">this</span>.props.isCreate?<span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/create`</span>:<span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/update`</span>,
                    <span class="hljs-attr">payload</span>:values
                });
            }
        });
    }
    onDel=<span class="hljs-function">(<span class="hljs-params">id</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/del`</span>,
            <span class="hljs-attr">payload</span>:id
        });
    }
    onAllDel=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/delAll`</span>,
            <span class="hljs-attr">payload</span>:<span class="hljs-keyword">this</span>.props.selectedRowKeys
        });
    }
    onSearch=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">let</span> values=<span class="hljs-keyword">this</span>.searchForm.props.form.getFieldsValue();
        <span class="hljs-keyword">let</span> where=<span class="hljs-built_in">Object</span>.keys(values).reduce(<span class="hljs-function">(<span class="hljs-params">memo,key</span>) =&gt;</span> {
            <span class="hljs-keyword">if</span> (values[key]){
                memo[key]=values[key];
            }
            <span class="hljs-keyword">return</span> memo;
        },{});
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/search`</span>,
            <span class="hljs-attr">payload</span>:where
        });
    }
    setRolePermission=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.props.selectedRows.length==<span class="hljs-number">1</span>) {
            <span class="hljs-keyword">let</span> record=<span class="hljs-keyword">this</span>.props.selectedRows[<span class="hljs-number">0</span>];
            <span class="hljs-keyword">this</span>.save({<span class="hljs-attr">setPermissionVisible</span>:<span class="hljs-literal">true</span>,record,<span class="hljs-attr">checkedKeys</span>:record.resourceIds});
        } <span class="hljs-keyword">else</span> {
            message.error(<span class="hljs-string">&apos;&#x4E3A;&#x89D2;&#x8272;&#x8BBE;&#x7F6E;&#x6743;&#x9650;&#x65F6;&#x8981;&#x9009;&#x62E9;&#x5E76;&#x4E14;&#x53EA;&#x80FD;&#x9009;&#x62E9;&#x4E00;&#x4E2A;&#x89D2;&#x8272;!&apos;</span>);
        }
    }
    onCheckPermission=<span class="hljs-function">(<span class="hljs-params">checkedKeys</span>) =&gt;</span> {
        <span class="hljs-keyword">this</span>.save({checkedKeys});
    }
    setRolePermissionOk=<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> {
        <span class="hljs-keyword">this</span>.props.dispatch({
            <span class="hljs-attr">type</span>: <span class="hljs-string">`<span class="hljs-subst">${ENTITY}</span>/setRolePermission`</span>
        });
    }
    render() {
        <span class="hljs-keyword">const</span> columns=[
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x540D;&#x79F0;&apos;</span>,
                <span class="hljs-attr">dataIndex</span>: <span class="hljs-string">&apos;name&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;name&apos;</span>
            },
            {
                <span class="hljs-attr">title</span>: <span class="hljs-string">&apos;&#x64CD;&#x4F5C;&apos;</span>,
                <span class="hljs-attr">key</span>: <span class="hljs-string">&apos;operation&apos;</span>,
                <span class="hljs-attr">render</span>: <span class="hljs-function">(<span class="hljs-params">val,record</span>) =&gt;</span> (
                    <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Fragment</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;warning&quot;</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span>=&gt;</span>this.onEdit(record)}&gt;&#x7F16;&#x8F91;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">Popconfirm</span>
                            <span class="hljs-attr">okText</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&quot;</span>
                            <span class="hljs-attr">cancelText</span>=<span class="hljs-string">&quot;&#x53D6;&#x6D88;&quot;</span>
                            <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;&#x786E;&#x8BA4;&#x5220;&#x9664;&#x6B64;&#x8BB0;&#x5F55;&#x5417;?&quot;</span>
                            <span class="hljs-attr">onConfirm</span>=<span class="hljs-string">{()</span> =&gt;</span> this.onDel(record.id)}&gt;
                             <span class="hljs-tag">&lt;<span class="hljs-name">Button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;danger&quot;</span>&gt;</span>&#x5220;&#x9664;<span class="hljs-tag">&lt;/<span class="hljs-name">Button</span>&gt;</span>
                        <span class="hljs-tag">&lt;/<span class="hljs-name">Popconfirm</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">Fragment</span>&gt;</span></span>
                )
            }
        ]
        <span class="hljs-keyword">let</span> {list,record,isCreate,editVisible,loading,dispatch,page,total,where,setPermissionVisible,resources,checkedKeys}=<span class="hljs-keyword">this</span>.props;
        <span class="hljs-keyword">const</span> pagination={
            <span class="hljs-attr">current</span>: page,
            <span class="hljs-attr">pageSize</span>: PAGE_SIZE,
            <span class="hljs-attr">showQuickJumper</span>: <span class="hljs-literal">true</span>,
            <span class="hljs-attr">showTotal</span>: <span class="hljs-function">(<span class="hljs-params">total,range</span>) =&gt;</span> {
                <span class="hljs-keyword">return</span> <span class="hljs-string">`&#x5171;<span class="hljs-subst">${total}</span>&#x6761;`</span>;
            },
            total,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">page</span>) =&gt;</span> {
                <span class="hljs-comment">//router.push(`/admin/user?page=${page}`);</span>
                <span class="hljs-comment">//dispatch(routerRedux.push(`/admin/user?page=${page}`));</span>
                dispatch(routerRedux.push({
                    <span class="hljs-attr">pathname</span>: <span class="hljs-string">`/admin/<span class="hljs-subst">${ENTITY}</span>`</span>,
                    <span class="hljs-attr">query</span>:{page}
                }));
            }
        }
        <span class="hljs-keyword">const</span> rowSelection={
            <span class="hljs-attr">type</span>: <span class="hljs-string">&apos;checkbox&apos;</span>,
            <span class="hljs-attr">selectedRowKeys</span>: <span class="hljs-keyword">this</span>.props.selectedRowKeys,
            <span class="hljs-attr">onChange</span>: <span class="hljs-function">(<span class="hljs-params">selectedRowKeys,selectedRows</span>) =&gt;</span> {
                <span class="hljs-keyword">this</span>.save({selectedRowKeys,selectedRows});
            }
        }
        <span class="hljs-keyword">return</span> (
            &lt;Fragment&gt;
                    &lt;Card&gt;
                    &lt;SearchForm
                        where={where}
                    onSearch={this.onSearch}
                    wrappedComponentRef={inst=&gt;this.searchForm=inst}
                /&gt;
            &lt;/Card&gt;
            &lt;Card&gt;
                &lt;Button.Group&gt;
                    &lt;Button type=&quot;warning&quot; onClick={this.onAdd}&gt;&#x6DFB;&#x52A0;&lt;/Button&gt;
                    &lt;Button type=&quot;danger&quot; onClick={this.onAllDel}&gt;&#x5168;&#x90E8;&#x5220;&#x9664;&lt;/Button&gt;
                    &lt;Button icon=&quot;solution&quot; onClick={this.setRolePermission}&gt;&#x8BBE;&#x7F6E;&#x6743;&#x9650;&lt;/Button&gt;
                    &lt;Button icon=&quot;team&quot; onClick={this.setRoleUser}&gt;&#x7528;&#x6237;&#x6388;&#x6743;&lt;/Button&gt;
                &lt;/Button.Group&gt;

                &lt;Table
                    columns={columns}
                    dataSource={list}
                    loading={loading}
                    rowKey={record =&gt; record.id}
                    pagination={pagination}
                        rowSelection={rowSelection}
                        onRow={
                            (record) =&gt; {
                                return {
                                    onClick: () =&gt; {
                                        let selectedRowKeys=this.props.selectedRowKeys;
                                        let selectedRows = this.props.selectedRows;
                                        let index = selectedRowKeys.indexOf(record.id);
                                        if (index==-1) {
                                            selectedRowKeys=[...selectedRowKeys,record.id];
                                            selectedRows=[...selectedRows,record];
                                        } else {
                                            selectedRowKeys=selectedRowKeys.filter(key =&gt; key!=record.id);
                                            selectedRows=selectedRows.filter(row =&gt; row.id!=record.id);
                                        }
                                        this.save({selectedRowKeys,selectedRows});
                                    }
                                }    
                            }
                        }
                /&gt;
                &lt;EditModal
                    wrappedComponentRef={instance =&gt;this.editForm=instance}
                    isCreate={isCreate}
                    visible={editVisible}
                    onOk={this.onEditOk}
                    onCancel={this.onEditCancel}
                    record={record}
                /&gt;
                &lt;PermissonModal
                    visible={setPermissionVisible}
                    record={record}
                    resources={resources}
                    checkedKeys={checkedKeys}
                    onCheck={this.onCheckPermission}
                    onOk={this.setRolePermissionOk}
                    onCancel={()=&gt;this.save({setPermissionVisible:false})}
                /&gt;
            &lt;/Card&gt;
          &lt;/Fragment&gt;
        )
    }
}

@Form.create()
class SearchForm extends Component{
    render() {
        let {form: {getFieldDecorator},onSearch,where={}}=this.props;
        return (
            &lt;Form layout=&quot;inline&quot;&gt;
                    &lt;FormItem
                        label=&quot;&#x89D2;&#x8272;&#x540D;&#x79F0;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;name&apos;,{initialValue:where.name})(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                &lt;FormItem&gt;
                    &lt;Button onClick={onSearch} shape=&quot;circle&quot; icon=&quot;search&quot;&gt;&lt;/Button&gt;
                &lt;/FormItem&gt;
                &lt;/Form&gt;
        )
    }
}

class PermissonModal extends Component{
    renderResources=(children) =&gt; {
        return children.map(child =&gt; {
            if (child.children.length &gt; 0) {
                return (
                    &lt;TreeNode title={child.name} key={child.id}&gt;
                        {this.renderResources(child.children)}
                    &lt;/TreeNode&gt;
                )
            } else {
                return &lt;TreeNode title={child.name} key={child.id}/&gt;
            }
        });
    }
    render() {
        let {onCheck,visible,onOk,onCancel,checkedKeys,resources=[]}=this.props;
        return (
            &lt;Modal
                visible={visible}
                title=&quot;&#x4E3A;&#x89D2;&#x8272;&#x8BBE;&#x7F6E;&#x6743;&#x9650;&quot;
                onOk={onOk}
                onCancel={onCancel}
                destroyOnClose
            &gt;
                &lt;Tree
                    checkable
                    defaultExpandAll
                    onCheck={onCheck}
                    checkedKeys={checkedKeys}
                &gt;
                    &lt;TreeNode title=&quot;&#x6240;&#x6709;&#x6743;&#x9650;&quot; key={0} disabled&gt;
                        {this.renderResources(resources)}
                    &lt;/TreeNode&gt;
                &lt;/Tree&gt;
            &lt;/Modal&gt;
        )

    }
}

@Form.create()
class EditModal extends Component{
    render() {
        let {visible,onOk,isCreate,onCancel,record,form: {getFieldDecorator}}=this.props;
        let {name,email,id}=record;
        return (
            &lt;Modal
                title={isCreate?&apos;&#x521B;&#x5EFA;&apos;:&apos;&#x4FEE;&#x6539;&apos;}
                visible={visible}
                onOk={onOk}
                onCancel={onCancel}
                destroyOnClose
            &gt;
                &lt;Form&gt;
                    &lt;FormItem&gt;
                       {
                            getFieldDecorator(&apos;id&apos;,{
                                initialValue: id
                            })(&lt;Input type=&quot;hidden&quot; /&gt;)
                        }
                    &lt;/FormItem&gt;
                    &lt;FormItem
                        label=&quot;&#x89D2;&#x8272;&#x540D;&#x79F0;&quot;
                    &gt;
                        {
                            getFieldDecorator(&apos;name&apos;,{
                                rules: [{
                                    required: true,
                                    message:&apos;&#x89D2;&#x8272;&#x540D;&#x79F0;&#x5FC5;&#x987B;&#x8F93;&#x5165;&apos;
                                }],
                                initialValue: name
                            })(&lt;Input /&gt;)
                        }
                    &lt;/FormItem&gt;
                &lt;/Form&gt;
            &lt;/Modal&gt;
        )
    }
}
</code></pre>
<h3 id="t3311.2 models/role.js">11.2 models/role.js <a href="#t3311.2 models/role.js"> # </a></h3>
<p>src/pages/admin/role/models/role.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> service <span class="hljs-keyword">from</span> <span class="hljs-string">&apos;../services/role&apos;</span>;
<span class="hljs-keyword">const</span> ENTITY=<span class="hljs-string">&apos;role&apos;</span>;
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {
    <span class="hljs-attr">namespace</span>: ENTITY,
    <span class="hljs-attr">state</span>: {
        <span class="hljs-attr">list</span>: [],
        <span class="hljs-attr">isCreate</span>:<span class="hljs-literal">true</span>,
        <span class="hljs-attr">editVisible</span>: <span class="hljs-literal">false</span>,
        <span class="hljs-attr">page</span>:<span class="hljs-number">1</span>,
        <span class="hljs-attr">record</span>: {},
        <span class="hljs-attr">selectedRowKeys</span>: [],
        <span class="hljs-attr">selectedRows</span>: [],
        <span class="hljs-attr">checkedKeys</span>: [],
        <span class="hljs-attr">resources</span>:[],
        <span class="hljs-attr">setPermissionVisible</span>:<span class="hljs-literal">false</span>,
        <span class="hljs-attr">where</span>: {}
    },
    <span class="hljs-attr">reducers</span>: {
        save(state,{payload}) {
            <span class="hljs-keyword">return</span> {...state,...payload};
        }
    },
    <span class="hljs-attr">effects</span>: {
        *fetch({<span class="hljs-attr">payload</span>: {page,where}},{call,put,select}) {
            <span class="hljs-keyword">if</span> (!where) {
                where =<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state[ENTITY].where);
            }
            <span class="hljs-keyword">if</span> (!page) {
                page =<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state[ENTITY].page);
            }
            <span class="hljs-keyword">const</span> {list,total}=<span class="hljs-keyword">yield</span> call(service.fetch,page,where);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{page,where,list,<span class="hljs-attr">page</span>:<span class="hljs-built_in">parseInt</span>(page),total}});
        },
        *search({<span class="hljs-attr">payload</span>:where},{call,put}) {
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">page</span>:<span class="hljs-number">1</span>,where}});
        },
        *create({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(service.create,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">page</span>:<span class="hljs-number">1</span>}});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{<span class="hljs-attr">editVisible</span>:<span class="hljs-literal">false</span>}});
        },
        *update({payload},{call,put,select}) {
            <span class="hljs-keyword">yield</span> call(service.update,payload);
            <span class="hljs-keyword">let</span> page=<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span>=&gt;</span>state[ENTITY].page);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {page}});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{<span class="hljs-attr">editVisible</span>:<span class="hljs-literal">false</span>}});
        },
        *del({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(service.del,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">page</span>:<span class="hljs-number">1</span>}});
        },
        *delAll({payload},{call,put}) {
            <span class="hljs-keyword">yield</span> call(service.delAll,payload);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {<span class="hljs-attr">page</span>:<span class="hljs-number">1</span>}});
        },
        *getResource({payload},{call,put}) {
            <span class="hljs-keyword">const</span> resources=<span class="hljs-keyword">yield</span> call(service.getResources);
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{resources}});
        },
        *setRolePermission({payload},{call,put,select}) {
            <span class="hljs-keyword">let</span> {record,checkedKeys}=<span class="hljs-keyword">yield</span> select(<span class="hljs-function"><span class="hljs-params">state</span> =&gt;</span> state[ENTITY]);
            <span class="hljs-keyword">yield</span> call(service.setRolePermission,{<span class="hljs-attr">roleId</span>:record.id,<span class="hljs-attr">resourceIds</span>:checkedKeys});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: {}});
            <span class="hljs-keyword">yield</span> put({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;save&apos;</span>,<span class="hljs-attr">payload</span>:{<span class="hljs-attr">setPermissionVisible</span>:<span class="hljs-literal">false</span>,<span class="hljs-attr">selectedRowKeys</span>:[],<span class="hljs-attr">selectedRows</span>:[]}});
        }
    },
    <span class="hljs-attr">subscriptions</span>: {
        setup({dispatch,history}) {
            <span class="hljs-keyword">return</span> history.listen(<span class="hljs-function">(<span class="hljs-params">{pathname,query}</span>) =&gt;</span> {
                <span class="hljs-keyword">if</span> (pathname === <span class="hljs-string">`/admin/<span class="hljs-subst">${ENTITY}</span>`</span>) {
                    dispatch({<span class="hljs-attr">type</span>: <span class="hljs-string">&apos;fetch&apos;</span>,<span class="hljs-attr">payload</span>: query});
                    dispatch({<span class="hljs-attr">type</span>:<span class="hljs-string">&apos;getResource&apos;</span>});
                }
            });
        }
    }
}
</code></pre>
<h3 id="t3411.3 services/role.js">11.3 services/role.js <a href="#t3411.3 services/role.js"> # </a></h3>
<p>src/pages/admin/role/services/role.js</p>
<pre><code class="lang-js"><span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getResources</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>/getResources`</span>);
}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">setRolePermission</span>(<span class="hljs-params">values</span>) </span>{
    <span class="hljs-keyword">return</span> request(<span class="hljs-string">`/api/<span class="hljs-subst">${ENTITY}</span>/setRolePermission`</span>,{
        <span class="hljs-attr">method</span>: <span class="hljs-string">&apos;POST&apos;</span>,
        <span class="hljs-attr">headers</span>:{<span class="hljs-string">&quot;Content-Type&quot;</span>:<span class="hljs-string">&quot;application/json&quot;</span>},
        <span class="hljs-attr">body</span>:<span class="hljs-built_in">JSON</span>.stringify(values)
    });
}
</code></pre>
<h2 id="t35&#x53C2;&#x8003;">&#x53C2;&#x8003; <a href="#t35&#x53C2;&#x8003;"> # </a></h2>
<ul>
<li><a href="http://www.ruanyifeng.com/blog/2016/06/css_modules.html">css_modules</a></li>
</ul>

        <div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
    </div>
    
</div>

<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.js"></script>
<script>
$('.warpper .page-toc ul ul li a').on('click',function(){
  $('.warpper .page-toc ul ul li a').removeClass('my-active')
  $(this).addClass('my-active')
})
  // if (!$('.understand-me').length) {
  //   var bar = $(window).height() - $('.navbar ').height() - $('.page-toc').position().top;
  //   var count = bar / 26 / 2;
  //   var barHeight = $('.page-toc').outerHeight();
  //   $('.page-toc li').eq(0).children('a').addClass('red');
  //   var arr = [];
  //   $("h1,h2,h3,h4,h5,h6").each(function () {
  //     arr.push($(this).position().top);
  //   });
  //   var timer
  //   function dark() {
  //     clearTimeout(timer)
  //      timer = setTimeout(function () {
  //      var top = Math.abs($('.page-toc > ul').position().top);
  //      var cur = $('.content').scrollTop();
  //      for (var i = arr.length; i >= 0; i--) {
  //        if (arr[i] <= cur) {
  //          break;
  //        }
  //      }
  //      if (i === -1) {
  //        i = 0;
  //      }
  //      $('.page-toc li a').removeClass('red');
  //      $('.page-toc li').eq(i).children('a').addClass('red');
  //      let height = $('.page-toc li').eq(i).position().top-$('.page-toc').height(); // 如果当前的offset出去了 回到中间可好？
  //      $('.page-toc').scrollTop(height+$('.page-toc').height()/2);
  //    },200)
  //   }

  //   $('.content').on('scroll', dark);
  // }
</script>
<style>

    /* ::-webkit-scrollbar{width:14px;}
    ::-webkit-scrollbar-track{background-color:transparent;}
    ::-webkit-scrollbar-thumb{background-color:transparent;}
    ::-webkit-scrollbar-thumb:hover {background-color:transparent}
    ::-webkit-scrollbar-thumb:active {background-color:transparent} */

    .page-toc > ul .red {
        background: #f3f3f3;
        z-index: 1;
        border-left: 3px solid #009a61;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        color: #000
    }





</style>
</body>
</html>
